/* 整体导航栏样式 */
.navbar {
    margin-bottom: 0;
    border-radius: 0;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    text-decoration: none;
    text-align: center; /* 让导航栏内所有子元素整体居中 */
}

.navbar-header a{
	text-decoration: none;
	color: darkolivegreen;
}

/* 导航栏品牌（也就是这里的"墨子服装"链接部分）样式 */
.navbar-brand {
    color: #777;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    display: inline-block; /* 使它能像内联元素一样居中，同时可以设置宽高等属性 */
    width: 100%; /* 占据一行的宽度，便于更好地居中 */
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #5e5e5e;
    text-decoration: none;
}

/* 导航栏中的列表项样式 */
.nav.navbar-nav {
    width: 100%; /* 让列表项容器占据整行宽度 */
    display: inline-block; /* 使列表项能整体居中 */
}

.nav.navbar-nav li {
    float: none; /* 取消之前的左浮动，因为要整体居中布局了 */
    list-style: none;
    display: inline-block; /* 让每个列表项能在一行内水平排列并居中 */
}

.nav.navbar-nav li a {
    color: #777;
    padding: 15px 15px;
    line-height: 20px;
    text-decoration: none;
}

.nav.navbar-nav li a:hover,
.nav.navbar-nav li a:focus {
    color: #333;
    background-color: #e7e7e7;
    text-decoration: none;
}

/* 针对当前选中的列表项（如果有相关交互需要突出显示当前选中项可添加此样式，这里先简单示例下） */
.nav.navbar-nav li.active a {
    color: #fff;
    background-color: #337ab7;
    text-decoration: none;
}